<template>
	<view class="container">
		<view class="infoBg" :style="{'background': 'url('+ listInfo.data.coverImgUrl +')'}"></view>
		<Header :isShow='isShow' :title="title" style="color: white;" :isPlay="3"/>
		<view class="content" style="color: aliceblue;">
			<scroll-view scroll-y="true" >
				<view class="box">
					<view class="image-box">
						<image :src="listInfo.data.coverImgUrl" mode=""></image>
					</view>
					<view class="image-info">
						<text>{{listInfo.data.name}}</text>
					</view>
					<view class="line-box">
						
					</view>
					<view class="msg-box" style="color: white;">
						<view class="msg-box-text1">
							标签：无
						</view>
						<view class="msg-box-text2">
							<text>{{listInfo.data.description}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { reactive, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import Header from "@/components/header/index.vue"
	import { getListInfo } from "@/common/api.js"
	
	export default {
		name: 'ListInfo',
		components:{ Header },
		setup(){
			let listInfo = reactive({data: {}})
			let isShow = ref(true)
			let title = ref('歌单')
			
			
			onLoad(async(data) =>{
				const res =  await getListInfo(data.id)
				listInfo.data = res
			})
			
			return{
				listInfo,
				isShow,
				title
			}
		}
	}
</script>

<style scoped>
.infoBg{
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-size: cover;
		background-position: center 0;
		filter: blur(20px);
		transform: scale(1.2);
}
.box{
	height: 100%;
	margin: 0 auto;
	margin: 30rpx;
}
.image-box{
	width: 400rpx;
	height: 400rpx;
	overflow: hidden;
	border-radius: 15rpx;
	margin: 0 auto;
}
.image-box image{
	width: 100%;
	height: 100%;
}
.line-box{
	background: linear-gradient(to left, rgba(238, 238, 238, 0.1) 0%,rgba(238, 238, 238, 0.7) 50%, rgba(238, 238, 238, 0.1) 100%); 
	width: 100%;
	height: 3rpx; 
	margin-bottom: 20rpx;
}
.image-info{
	width: 100%;
	height: 100rpx;
	margin-top: 50rpx;
	text-align: center;
	font-size: 40rpx;
	letter-spacing: 4rpx;
	color: white;
}
.msg-box{
	font-size: 30rpx;
}
.msg-box-text2{
	margin-top: 10rpx;
	height: 200rpx;
}
.msg-box-text2 text{
	line-height: 50rpx;
}
</style>
